<template>
  <div>
    <el-upload
      action="#"
      :list-type="listType"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
      :limit="maxCount"
      :on-exceed="handleExceed"
      :show-file-list="showFile"
      :http-request="uploadActionRequest"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog
      title="图片预览"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <img width="100%" :src="dialogImageUrl" :alt="dialogImageUrl" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { fileUpload } from "@/api/fileupload";
import { mapState } from "vuex";
export default {
  name: "multiUpload",
  props: {
    //图片属性数组
    value: Array,
    //最大上传图片数量
    maxCount: {
      type: Number,
      default: 30,
    },
    listType: {
      type: String,
      default: "picture",
    },
    showFile: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: null,
    };
  },
  computed: {
    //state:他是咱们大仓库中的state
    ...mapState({
      fileDomain: (state) => state.fileupload.fileDomain,
    }),
    fileList() {
      console.log("111111111111111------------");
      let fileList = [];
      for (let i = 0; i < this.value.length; i++) {
        fileList.push({
          url: this.fileDomain + "/" + this.value[i],
          shortUrl: this.value[i],
        });
      }

      return fileList;
    },
  },
  mounted() {},
  methods: {
    async uploadActionRequest(fileData) {
      let fd = new FormData();
      fd.append("file", fileData.file);
      const resp = await fileUpload(fd);
      return resp;
    },
    emitInput(fileList) {
      let value = [];
      console.log("2222222222222222------------");
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].shortUrl);
      }
      console.log(value, "2222222222222222------------");
      this.$emit("input", value);
    },
    handleRemove(file, fileList) {
      this.emitInput(fileList);
    },
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    beforeUpload(file) {
      let _self = this;
    },
    handleUploadSuccess(res, file) {
      let resData = res.data;
      // this.fileList.pop();
      this.fileList.push({
        shortUrl: resData.fileKey,
        url: resData.fileUrl,
      });
      console.log("3333333333333333333333------------");
      this.emitInput(this.fileList);
    },
    handleExceed(files, fileList) {
      this.$message({
        message: "最多只能上传" + this.maxCount + "张图片",
        type: "warning",
        duration: 1000,
      });
    },
  },
};
</script>
<style>
.el-upload {
  width: 60px;
  height: 60px;
  border: 1px dashed #e2e2e2;
  text-align: center;
  line-height: 60px;
}
.el-upload:hover {
  border: 1px dashed #1890ff;
}

.el-upload:hover .el-upload-btn {
  color: #1890ff;
}
</style>


